<template>
  <div class="custom-config">
    <el-table
      :data="tableColumnList"
      :size="defaultFormItemSize"
      header-cell-class-name="table-header-gray"
      height="400px"
    >
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="表格列名" prop="showName" />
      <el-table-column label="是否显示" prop="show">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.show" />
        </template>
      </el-table-column>
    </el-table>
    <div class="menu-box">
      <el-button :size="defaultFormItemSize" @click="onCancel">取消</el-button>
      <el-button type="primary" :size="defaultFormItemSize" @click="onSaveClick">保存</el-button>
    </div>
  </div>
</template>

<script>
import { traverseTree } from '@/utils';
import thirdPartyMixin from '@/views/thirdParty/thirdPartyMixin.js';

export default {
  name: 'CustomConfig',
  props: {
    data: {
      type: Array
    }
  },
  mixins: [thirdPartyMixin],
  data() {
    return {
      tableColumnList: []
    };
  },
  methods: {
    onCancel() {
      if (this.observer && this.observer.cancel) {
        this.observer.cancel(false);
      } else {
        this.onCloseThirdDialog(false);
      }
    },
    onSaveClick() {
      if (this.observer && this.observer.cancel) {
        this.observer.cancel(true, this.tableColumnList);
      } else {
        this.onCloseThirdDialog(
          true,
          this.thirdParams.path,
          this.dialogParams.data,
          this.tableColumnList
        );
      }
    }
  },
  computed: {
    dialogParams() {
      return {
        data: this.data || this.thirdParams.data || []
      };
    }
  },
  mounted() {
    this.tableColumnList = [];
    traverseTree(this.dialogParams.data, item => {
      if (item.isGroup == null || !item.isGroup) {
        this.tableColumnList.push({
          ...item
        });
      }
    });
  }
};
</script>

<style scoped>
.custom-config .menu-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 15px;
}
</style>
